<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>虚假的游记页面</title>
		<link rel="stylesheet" type="text/css" href="css/views.css" />
		<link rel="stylesheet" type="text/css" href="css/write.css"/>

	</head>
	<body>
		<!--  -->
		<header>
			<img src="img/ban04.jpg">
		</header>
		<!--  -->
		<div class="main_body">
			<div class="nav">
				<a href="index.html" class="item"><span class="item_t iconfont2">&#xe620;<p>主页</p></span>
				</a><a href="views_scenery.html" class="item"><span class="item_t iconfont">&#xe646;<p>住宿</p></span>
				</a><a href="views_foods.html" class="item"><span class="item_t iconfont">&#xe60c;<p>美食</p></span>
				</a><a href="views_write.html" class="item"><span class="item_t iconfont">&#xe652;<p>游记</p></span>
				</a>
			</div>
			
			<div class="left_cont">
				<div class="item">
					<div>
						<h2>捕鱼小游戏</h2>
						<ul>
							<li>【游戏说明】这是用canvas制作的一个简易的捕鱼游戏。</li>
							<li>H5动画的课设，挺有意思的选修课，过来给大家安利。</li>
							<li>【操作方法】用鼠标拖动鱼到篮子即可获得分数。</li>
						</ul>
						<br><br>
						<h4>虚假的游记页面</h4>
					</div>
				</div>
			</div>
			<div class="right_cont">
				<div class="item">
					<div class="box">
						<canvas id="cav1" width="800" height="374"></canvas>
						<canvas id="cav2" width="800" height="374"></canvas>
						<button id="begingame" type="button">开始游戏</button>
						<button id="againgame" type="button">重新游戏</button>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<footer>

		</footer>
		
		
		<!-- js -->
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			var ctx = $('cav1').getContext('2d');
			var ctx2 = $('cav2').getContext('2d');
			var bg = new Image;
			var fish = new Image;
			var fish2 = new Image;
			var fish3 = new Image;
			var fish4 = new Image;
			var creelimg = new Image;
			fish.src = "img/鱼动画.png";
			fish2.src = "img/鱼动画2.png";
			fish3.src = "./img/鱼动画3.png";
			fish4.src = "img/鱼动画4.png";
			bg.src = "img/海底.png";
			creelimg.src = "./img/竹篮.png"
			
			
			var caughtFish;
			var ishit;
			var indexFish;
			var nowX, nowY; //记录当前鼠标位置
			var total_points=0;
			var timer;//倒计时
			var timerinter;
			var timeflg=false;
			
			window.onload = function() {
				// console.log(ctx2);
				ctx.drawImage(bg, 0, 0);
				var fishobj = [];
				var creelobj = new Creel(creelimg, 650, 75);
				var scoreobj = new ShowText(cav2.width/2-23,60,'40px Georgia');
				var add_socreobj = new ShowText2(cav2.width/2-15,30,'20px Georgia');	
				var downtimeobj=new ShowTime(10,40,'20px 黑体',30);
				
				function swimall() {
					cav2.width = cav2.width;
					creelobj.draw();
					scoreobj.draw();
					add_socreobj.draw();
					downtimeobj.draw();
					for (var i = 0; i < fishobj.length; i++) {
						fishobj[i].swim(ctx2);
					}
					timer=window.requestAnimationFrame(swimall);
					if(timeflg==true){
						ctx2.fillText("游戏结束!",cav2.width/2-36,100);
						window.cancelAnimationFrame(timer);
					}
				}
				
				// 事件绑定
				begingame.onclick = function() {
					//隐藏开始按钮
					
					begingame.style.display = "none";
					
					/* 	鱼类
						参数
						Image--图片,x--图片宽,y--图片高,pY--起始y值,A--幅值,w--频率,s--鱼速度,m--鱼比例 */
					fishobj.push(new Fishdraw(fish, fish.width, fish.height / 4, 200, 10, 20, 1.5, 0.3 ,10));
					fishobj.push(new Fishdraw(fish2, fish2.width, fish2.height / 4 + 1, 170, 50, 10, 1, 0.5 ,20));
					fishobj.push(new Fishdraw(fish3, fish3.width, fish3.height / 4, 250, 20, 10, 3, 0.3, 25));
					fishobj.push(new Fishdraw(fish4, fish4.width, fish4.height / 4+1, 200, 60, 15, 2.0, 0.5,15));
					swimall();
			
					timerinter = setInterval(function createfish() {
						downtimeobj.dowmtime();
						if (fishobj.length < 40) {
							var flg=Math.floor(Math.random()*4);
							switch( flg ){
								case 0:
									fishobj.push(new Fishdraw(fish, fish.width, fish.height / 4, 150 + Math.random() * 80, 10, 20, 1.5, 0.3,10));
									break;
								case 1:
									fishobj.push(new Fishdraw(fish2, fish2.width, fish2.height / 4 + 1, 150 + Math.random() * 60, 50, 10, 1, 0.5,20));
									break;
								case 2:
									if(Math.random()>0.5)
									fishobj.push(new Fishdraw(fish3, fish3.width, fish3.height / 4, 180 + Math.random() * 90, Math.random() * 40, 10, 3.5, 0.3,25));
									break;
								case 3:
									fishobj.push(new Fishdraw(fish4, fish4.width, fish4.height / 4+1, 180 + Math.random() * 60, 60, 15, 2.0, 0.5,15));
									break;
							}
							console.log("create");
						}
						if(timeflg==true){
							clearInterval(timerinter);
							againgame.style.display = "block";
						}
					}, 1000)
				
				}
				
				
				cav2.onmousedown = function(e) {
					for (var i = 0; i < fishobj.length; i++) {
						if (fishobj[i].pos(e.offsetX, e.offsetY)) {
							// console.log("hit!");
							indexFish = i;
							caughtFish = fishobj[i];
							nowX = e.offsetX;
							nowY = e.offsetY;
							ishit = true;
						}
					}
					if (ishit)
						{
							caughtFish.isCaught = true;
							// console.log(caughtFish.score);
						}
				}
				cav2.onmousemove = function(e) {
					if (ishit) {
						caughtFish.movefish(e.offsetX - nowX + caughtFish.oX,
							e.offsetY - nowY + caughtFish.oY);
			
						nowX = e.offsetX;
						nowY = e.offsetY;
						// if (creelobj.pos(caughtFish)) {
						// 	creelobj.mhit = true;
						// }
					}
				}
				cav2.onmouseup = function(e) {
					if (ishit) {
						if (creelobj.pos(caughtFish)) {
							creelobj.mhit = true;
							add_socreobj.text=caughtFish.score;
							total_points+=caughtFish.score;
							fishobj.splice(indexFish, 1);
						} else {
							caughtFish.isCaught = false;
							caughtFish.d = (caughtFish.oX + caughtFish.x) / caughtFish.s;
							caughtFish.r = 0;
							caughtFish.frm = 0;
						}
					}
					caughtFish = null;
					ishit = false;
				}
				// 重新游戏
				againgame.onclick=function(){
					window.location.reload();
				}
				// 事件结束
			}
			
			
			
			
			/*
				各类抽象类定义==================
			  */
			
			/* 总分数
				参数：位置x,y,以及文本样式
			 */
			function ShowText(x,y,fonts){
				this.x=x;
				this.y=y;
				this.font=fonts;
				this.d=0;
				
				this.draw=function(){
					ctx2.font=this.font;
					ctx2.fillStyle='red';
					ctx2.fillText(total_points,this.x,this.y);
				}
			
			}
			/* 增加分数 
				参数：位置x,y,以及文本样式
			*/
			function ShowText2(x,y,fonts){
				this.x=x;
				this.y=y;
				this.font=fonts;
				this.d=0;
				this.tras=90;
				this.text=null;
				this.tempY=y;
				
				this.draw=function(){
					if(this.text==null){
						
					}else{
						ctx2.font=this.font;
						ctx2.fillStyle='#ff1861'+this.tras;
						this.tras-=10;
						this.tempY--;
						ctx2.fillText("+"+this.text,this.x,this.tempY);
						if(this.tempY<10){
							this.tempY=this.y;
							this.tras=90;
							this.text=null;
						}
					}
				}
			
			}
			/* 倒计时 */
			function ShowTime(x,y,fonts,t){
				this.x=x;
				this.y=y;
				this.font=fonts;
				this.d=0;
				this.t=t;
				this.draw=function(){
					ctx2.font=this.font;
					ctx2.fillStyle='blue';
					ctx2.fillText("倒计时: "+this.t,this.x,this.y);
					if(this.t==0){
						timeflg=true;
					}
				}
				this.dowmtime=function(){
					this.t--;
				}
			}
			
			/*  篮子 
				参数：图片,其实x轴位置,其实y轴位置
			*/
			function Creel(Image, x, y) {
				this.img = Image;
				this.x = x;
				this.y = y;
				this.w = Image.width;
				this.h = Image.height * 2;
				this.mhit = false;
				this.d = 0;
			}
			Creel.prototype.draw = function() {
				if (!this.mhit) {
					if (this.d > 0) {
						this.d -= 0.5;
						ctx2.drawImage(this.img, this.x - this.d, this.y, this.w + this.d * 2, this.h);
						// ctx2.strokeRect( this.x - this.d, this.y,this.w + this.d * 2, this.h);
					} else {
						ctx2.drawImage(this.img, this.x, this.y, this.w, this.h);
						// ctx2.strokeRect( this.x - this.d, this.y,this.w + this.d * 2, this.h);
					}
				} else {
					this.d += 0.5;
					ctx2.drawImage(this.img, this.x - this.d, this.y, this.w + this.d * 2, this.h);
					// ctx2.strokeRect( this.x - this.d, this.y,this.w + this.d * 2, this.h);
					if (this.d > 10) {
						this.mhit = false;
					}
				}
			}
			//碰撞检测
			Creel.prototype.pos = function(obj) {
				// 通过起始位置判断先后关系，后通过最大长度判断是否相交
				var compXY = [
					Math.max(obj.oX, this.x),
					Math.min((obj.oX + obj.x * obj.m), this.x + this.w),
					Math.max(obj.oY, this.y),
					Math.min((obj.oY + obj.y * obj.m), this.y + this.h)
				]
				// 【0】【2】为相交点左上角
				if( (compXY[0] < compXY[1]) && (compXY[2] < compXY[3]) ){
					if( (compXY[0] < compXY[1]) && (compXY[2] < compXY[3]) ){
						var dataimg = ctx2.getImageData(compXY[0],compXY[2],compXY[1]-compXY[0],compXY[3]-compXY[2]).data;
						for(var i=3;i<dataimg.length;i+=4){
							console.log(dataimg);
							if(dataimg[i]>0) return true;
						}
					}
				}else{
					return false;
				}
				
				// return (compXY[0] < compXY[1]) && (compXY[2] < compXY[3]);
			}
			
			
			
			
			
			
			/* 	鱼类
				参数：
				Image--图片,x--图片宽,y--图片高,pY--起始y值,A--幅值,w--频率,s--鱼速度,m--鱼比例 
			*/
			function Fishdraw(Image, x, y, pY, A, w, s, m ,score) {
				//
				this.Image = Image;
				this.x = x;
				this.y = y;
				this.A = A;
				this.w = w;
				this.s = s;
				this.m = m;
				this.score=score;
				
				this.flg = true;
				this.pY = pY;
				this.d = 0;
				this.frm = 0;
				this.frame = [];
				// this.newY;
				// y角度
				this.r = 0;
				this.swim;
			
				// 鱼当前位置 以及被抓标志
				this.oX = this.d * this.s - this.x;
				this.oY = pY;
				this.isCaught = false;
			
				//存帧函数
				this.cut = function() {
					for (var i = 0; i < 4; i++) {
						var cav = document.createElement('canvas');
						cav.width = this.x;
						cav.height = this.y;
						var cont = cav.getContext("2d");
						cont.drawImage(this.Image, 0, i * this.y, this.x, this.y, 0, 0, this.x, this.y);
						this.frame[i] = cav;
					}
				};
				this.cut();
			}
			// 鱼游动函数
			Fishdraw.prototype.swim = function(ctx) {
				ctx.save();
				ctx.translate(this.oX, this.oY);
				ctx.drawImage(this.frame[this.frm], 0, 0, this.x, this.y,
					0, 0, this.x * this.m, this.y * this.m);
					
				// ctx.strokeRect(0,0,this.x * this.m, this.y * this.m);
				if (!this.isCaught) {
					this.d++;
					this.oX = this.d * this.s - this.x;
			
					if (Math.floor(this.d % 10) == 0) {
						this.r++;
						this.frm++;
						this.oY = this.pY + this.A * Math.sin(this.w * this.r * Math.PI / 180);
						// console.log(this.d);
					}
			
					if (this.frm >= 4) this.frm = 0;
			
					if (this.d * this.s > 800 + this.x) {
						this.d = 0;
					}
				}
				ctx.restore();
			
			}
			//判断鱼位置函数
			Fishdraw.prototype.pos = function(x, y) {
				var boolX = x >= this.oX && x <= (this.oX + this.x * this.m);
				var boolY = y >= this.oY && y <= (this.oY + this.y * this.m);
				return boolX && boolY;
				// this.oX=
			}
			Fishdraw.prototype.movefish = function(x, y) {
				this.oX = x;
				this.oY = y;
			
			}
			
			
		</script>
	
		<!-- <script src="js/fishgame.js" type="text/javascript" charset="utf-8"></script> -->
	</body>
</html>
